<template>
  <div id="container" :style="{width: '1700px', height: '800px'}" />
</template>

<script>
import { queryCakeData } from '@/api/system/echarts'

export default {
  data() {
    return {
      dataOfCake: []
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    // 设置async关键字，需要等queryAddressOfCustomer()方法执行完成后，再执行下面的代码
    async drawLine() {
      await queryCakeData().then(res => {
        this.dataOfCake = res.data
      })
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('container'))
      // 开始绘制图表
      var option
      option = {
        title: {
          text: '饼图测试',
          x: 'center'
        },
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.dataOfCake
          }
        ]
      }
      if (option && typeof option === 'object') {
        myChart.setOption(option, true)
      }
    }
  }
}
</script>

<style scoped="scoped">
  #container{
    padding-top: 20px;
  }
</style>
